<template>
  <div class="notification-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">
        <i class="iconfont icon-xiaoxi"></i>
        我的通知
      </h1>
      <div class="notification-stats">
        <span class="unread-count">{{ unreadCount }}条未读</span>
        <el-button 
          v-if="unreadCount > 0" 
          type="primary" 
          size="small" 
          @click="markAllAsRead"
          :loading="markingAllRead"
        >
          全部标记为已读
        </el-button>
      </div>
    </div>

    <!-- 通知筛选 -->
    <div class="filter-section">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-select v-model="filterType" placeholder="选择通知类型" @change="loadNotifications">
            <el-option label="全部" value=""></el-option>
            <el-option label="系统通知" value="system"></el-option>
            <el-option label="会员升级" value="member_upgrade"></el-option>
            <el-option label="积分变动" value="points_change"></el-option>
            <el-option label="优惠活动" value="promotion"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select v-model="filterRead" placeholder="阅读状态" @change="loadNotifications">
            <el-option label="全部" value=""></el-option>
            <el-option label="未读" value="false"></el-option>
            <el-option label="已读" value="true"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="loadNotifications">
            <i class="iconfont icon-sousuo"></i>
            筛选
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 通知列表 -->
    <div class="notification-list">
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      
      <div v-else-if="notifications.length === 0" class="empty-container">
        <div class="empty-icon">
          <i class="iconfont icon-wuxiaoxi"></i>
        </div>
        <h3 class="empty-title">暂无通知</h3>
        <p class="empty-desc">您目前没有任何通知消息</p>
      </div>

      <div v-else class="notification-items">
        <notification-card 
          v-for="notification in notifications" 
          :key="notification.id"
          :notification="notification"
          @mark-read="markAsRead"
        />
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import NotificationCard from '@/components/NotificationCard.vue';

export default {
  name: "NotificationList",
  components: {
    NotificationCard
  },
  data() {
    return {
      notifications: [],
      loading: false,
      markingAllRead: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      unreadCount: 0,
      filterType: '',
      filterRead: '',
      notificationTypes: {
        'system': '系统通知',
        'member_upgrade': '会员升级',
        'points_change': '积分变动',
        'promotion': '优惠活动'
      }
    };
  },
  created() {
    this.loadNotifications();
    this.loadUnreadCount();
  },
  methods: {
    async loadNotifications() {
      this.loading = true;
      try {
        const params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        
        if (this.filterType) {
          params.notificationType = this.filterType;
        }
        if (this.filterRead !== '') {
          params.isRead = this.filterRead === 'true';
        }

        const response = await this.request.get('/api/member/notification/user', { params });
        if (response.code === '200') {
          this.notifications = response.data.records || response.data;
          this.total = response.data.total || this.notifications.length;
        } else {
          this.$message.error(response.msg || '获取通知失败');
        }
      } catch (error) {
        console.error('加载通知失败:', error);
        this.$message.error('加载通知失败');
      } finally {
        this.loading = false;
      }
    },

    async loadUnreadCount() {
      try {
        const response = await this.request.get('/api/member/notification/unread/count');
        if (response.code === '200') {
          this.unreadCount = response.data;
        }
      } catch (error) {
        console.error('获取未读数量失败:', error);
      }
    },

    async markAsRead(notification) {
      if (notification.isRead) return;
      
      try {
        const response = await this.request.post('/api/member/notification/read', {
          notificationIds: [notification.id]
        });
        
        if (response.code === '200') {
          notification.isRead = true;
          this.unreadCount = Math.max(0, this.unreadCount - 1);
          this.$message.success('标记为已读');
        } else {
          this.$message.error(response.msg || '标记失败');
        }
      } catch (error) {
        console.error('标记已读失败:', error);
        this.$message.error('标记失败');
      }
    },

    async markAllAsRead() {
      this.markingAllRead = true;
      try {
        const response = await this.request.post('/api/member/notification/read-all');
        if (response.code === '200') {
          this.notifications.forEach(notification => {
            notification.isRead = true;
          });
          this.unreadCount = 0;
          this.$message.success('全部标记为已读');
        } else {
          this.$message.error(response.msg || '标记失败');
        }
      } catch (error) {
        console.error('全部标记已读失败:', error);
        this.$message.error('标记失败');
      } finally {
        this.markingAllRead = false;
      }
    },

    handlePageChange(page) {
      this.currentPage = page;
      this.loadNotifications();
    },

    getNotificationIcon(type) {
      const icons = {
        'system': 'iconfont icon-xitong',
        'member_upgrade': 'iconfont icon-huiyuan',
        'points_change': 'iconfont icon-jifen',
        'promotion': 'iconfont icon-youhui'
      };
      return icons[type] || 'iconfont icon-xiaoxi';
    },

    getNotificationTypeText(type) {
      return this.notificationTypes[type] || '通知';
    },

    formatTime(time) {
      if (!time) return '';
      const date = new Date(time);
      const now = new Date();
      const diff = now - date;
      
      if (diff < 60000) { // 1分钟内
        return '刚刚';
      } else if (diff < 3600000) { // 1小时内
        return Math.floor(diff / 60000) + '分钟前';
      } else if (diff < 86400000) { // 1天内
        return Math.floor(diff / 3600000) + '小时前';
      } else if (diff < 604800000) { // 1周内
        return Math.floor(diff / 86400000) + '天前';
      } else {
        return date.toLocaleDateString();
      }
    }
  }
};
</script>

<style scoped>
.notification-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  min-height: 80vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title i {
  font-size: 32px;
  color: #667eea;
}

.notification-stats {
  display: flex;
  align-items: center;
  gap: 15px;
}

.unread-count {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.filter-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 15px;
}

.loading-container {
  padding: 20px;
}

.empty-container {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon i {
  font-size: 80px;
  color: #ddd;
  margin-bottom: 20px;
}

.empty-title {
  font-size: 24px;
  color: #666;
  margin: 0 0 10px 0;
}

.empty-desc {
  font-size: 16px;
  color: #999;
  margin: 0;
}

.notification-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .notification-container {
    padding: 15px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .notification-stats {
    width: 100%;
    justify-content: space-between;
  }
}
</style> 